<template>
  <div>
    <!-- 面包屑 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品分类</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片区域 -->
    <el-card>
      <div class="btn"><el-button type="primary" @click="additem=true">添加分类</el-button></div>
      <!-- 表格区域(树形插件) -->
      <tree-table :data="catelist" :columns="columns" :selection-type="false" :expand-type="false"
      show-index index-text="#" border :show-row-hover="false">
        <!-- 是否有效模板-->
        <template slot="isok" slot-scope="scope">
          <i class="el-icon-success" style="color:lightgreen" v-if="scope.row.cat_deleted===false"></i>
          <i class="el-icon-error" v-else></i>
        </template>
        <!--排序模板-->
        <template slot="order" slot-scope="scope">
          <el-tag v-if="scope.row.cat_level==0">一级</el-tag>
          <el-tag v-if="scope.row.cat_level===1" type="info">二级</el-tag>
          <el-tag v-if="scope.row.cat_level===2" type="warning">三级</el-tag>
        </template>
        <!-- 操作 -->
        <template slot="fix" slot-scope="scope">
          <el-button size="mini" type="primary" icon="el-icon-edit">编辑</el-button>
          <el-button size="mini" type="warning" icon="el-icon-delete">删除</el-button>
        </template>
      </tree-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagenum"
        :page-sizes="[3, 5, 7, 9]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="30">
      </el-pagination>
    </el-card>
    <!-- 添加分类的对话框 -->
    <el-dialog title="添加分类" :visible.sync="additem" width="45%" @close="handleclose">
      <el-form ref="cateform" :model="cateform" :rules="caterules" label-width="100px">
        <el-form-item label="分类名称" prop="cat_name">
          <el-input v-model="cateform.cat_name"></el-input>
        </el-form-item>
        <el-form-item label="父级分类">
          <el-cascader expandTrigger="hover"
           clearable
           v-model="selectitem"
           :options="catelist"
           :props="cateprops"
           @change="handleChange"
           change-on-select>
          </el-cascader>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="additem = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {goodscate} from "@/api/login"
export default {
  data(){
    return{
      catelist:[],
      columns:[
        {label:"分类名称",prop:"cat_name"},
        // type:表示 当前列定义为模板列   template：表示  当前列的模板名称
        {label:"是否有效",type:"template",template:"isok"},
        {label:"排序",type:"template",template:"order"},
        {label:"操作",type:"template",template:"fix"}
      ],
      type:2,
      pagenum:1,
      pagesize:3,
      additem:false,
      // 总条数
      total:0,
      cateform:{
        cat_name:'',
        cat_pid:0,
        cat_level:0
      },
      // 表单验证规则
      caterules:{
        cat_name:[
          { required: true, message: '请输入分类名称', trigger: 'blur' },
          { min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }
        ],
      },
      // 级联选择器对象
      cateprops:{
        value:'cat_id',
        label:"cat_name",
        children:"children"
      },
      // 选中项id
      selectitem:[]
    }
  },
  created(){
    this.load_data()
  },
  methods:{
    load_data(){
      goodscate({type:3,pagenum:this.pagenum,pagesize:this.pagesize}).then(({data})=>{
        console.log(data)
        this.total=data.data.total
        this.catelist=data.data.result
        // this.catelist=res.data.data
      })
    },
    // 监听pagesize改变
    handleSizeChange(size){
      console.log(size)
      this.pagesize=size
      this.load_data()
    },
    // 监听pagenum改变
    handleCurrentChange(num){
      console.log(num)
      this.pagenum=num
      this.load_data()
    },
    // 添加分类，选择项发生变化
    handleChange(item){
      console.log(item)
    },
    // 重置添加分类的表单
    handleclose(){
      this.$refs.cateform.resetFields()
      this.selectitem=[]
    }
  }
}
</script>
<style Lang="less" scoped>

</style>